<template>
  <view class="dy-scroll-container">
    <dy-navbar title="数字滚动" />
    <scroll-view class="dy-scroll" scroll-y="">
      <dy-card padding="0">
        <dy-section slot="title" padding="24">
          基础用法
        </dy-section>
        <template slot="body">
          <view class="dy-pd-24">
            <dy-count-up start-num="0" end-num="999" />
          </view>
          <view class="dy-pd-24">
            <dy-count-up start-num="999" end-num="0" />
          </view>
        </template>
      </dy-card>
      <dy-card padding="0">
        <dy-section slot="title" padding="24">
          设置滚动动画时间
        </dy-section>
        <template slot="body">
          <view class="dy-pd-24">
            <dy-count-up start-num="0" end-num="999" duration="10000" />
          </view>
          <view class="dy-pd-24">
            <dy-count-up start-num="0" end-num="999" duration="3000" />
          </view>
        </template>
      </dy-card>
      <dy-card padding="0">
        <dy-section slot="title" padding="24">
          显示小数位
        </dy-section>
        <template slot="body">
          <view class="dy-pd-24">
            <dy-count-up start-num="0" end-num="999" decimals="1" />
          </view>
          <view class="dy-pd-24">
            <dy-count-up start-num="0" end-num="999.99" decimals="2" />
          </view>
        </template>
      </dy-card>
      <dy-card>
        <dy-section slot="title">
          显示千分位分隔符
        </dy-section>
        <template slot="body">
          <dy-count-up start-num="0" end-num="19288585993" decimals="2" thousands="," />
        </template>
      </dy-card>
      <dy-card padding="0">
        <dy-section slot="title" padding="24">
          缓动效果
        </dy-section>
        <template slot="body">
          <view class="dy-pd-24">
            <dy-count-up start-num="0" end-num="999" is-ease />
          </view>
        </template>
      </dy-card>
      <dy-card padding="0">
        <dy-section slot="title" padding="24">
          字体颜色以及大小
        </dy-section>
        <template slot="body">
          <view class="dy-pd-24">
            <dy-count-up start-num="0" end-num="999" font-size="80" />
          </view>
          <view class="dy-pd-24">
            <dy-count-up start-num="0" end-num="999" font-color="red" />
          </view>
        </template>
      </dy-card>
      <dy-card padding="0">
        <dy-section slot="title" padding="24">
          关闭自动滚动
        </dy-section>
        <template slot="body">
          <view class="dy-pd-24">
            <dy-count-up ref="countUP" start-num="0" end-num="999" :autoplay="false" />
          </view>
          <view class="btn-wrapper dy-justify-between dy-pd-bottom-32">
            <dy-button size="small" @click="handleControl('start')">开始</dy-button>
            <dy-button size="small" @click="handleControl('stop')">暂停</dy-button>
            <dy-button size="small" @click="handleControl('reset')">复原</dy-button>
          </view>
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'CountUp',
  methods: {
    handleControl(action) {
      const el = this.$refs.countUP
      switch (action) {
        case 'start':
          el.start()
          break
        case 'stop':
          el.stop()
          break
        case 'reset':
          el.reset()
          break
      }
    }
  }
}
</script>
